﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>领导行程</title>
		<style type="text/css">
	    	*{
	    		margin: 0;
	    		padding: 0;
	    		font-size: 14px;
	    		font-family: "微软雅黑";
	    	}
			.container{ 
				display: flex;
				width: 100%; 
				min-height: -webkit-fill-available;
				background-color: #eff2f5;
			}
			.left{ 
				position: fixed;
				width: 230px; 
		
			}
			.left-title {
			    line-height: 50px;
			    background-color: #dee8ee;
			    font-size: 18px;
			    color: #333;
			    font-weight: bold;
			    text-align: center;
			}
			.left ul{
			    list-style: none;
			    background-color: rgb(245,245,245);
			}
			.left li{
				height: 50px;
				padding-left: 20px;
				font-size: 12px;
				cursor: pointer;
				background-color: rgb(250,250,250);
			}
			.left li span{ 
				display: block;
				line-height: 49px; 
				border-bottom: 1px solid #e5e5e5;
			}
			.left .hover{
				position: relative;
				background-color: #eff2f5;
			}
			.left .hover span{
				display: block;
				font-size: 18px;
				color: #1890ff;
				font-weight: bold;
				line-height: 49px;
			}
			.hover:before {
			    content: '';
			    position: absolute;
			    width: 5px;
			    height: 49px;
			    background-color: #1890ff;
			    right: 0;
			    top: 0;
			}
			.right{
				width: inherit;
				margin: 20px 25px;
				margin-left: 250px;
			}
			.top-button{
				display: flex;
				justify-content: center;
			}
			.top-button button {
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    width: 110px;
			    height: 32px;
			    margin: 0 20px;
			    border-radius: 4px;
			    background-color: #fff;
			    border: 1px solid #d9d9d9;
			}
			.triangle_border_left {
			    width: 0;
			    height: 0;
			    border-width: 7px 7px 7px 0;
			    border-style: solid;
			    border-color: transparent #333 transparent transparent;
			    position: relative;
			    margin-right: 10px;
			}
			.top-button .next{
				background-color: #1790ff;
				color: #fff;
			}
			.triangle_border_right{
			    width:0;
			    height:0;
			    border-width:7px 0 7px 7px;
			    border-style:solid;
			    border-color:transparent transparent transparent #fff;/*透明 透明 透明 灰*/
			    position:relative;
			    margin-left: 10px;
			}
			.right-title{ 
				display: flex; 
				margin: 20px 0;
				background-color: #fff;
			} 
			.right-title p {
			    line-height: 50px;
			    text-align: center;
			    font-size: 18px;
			    color: #333;
			    font-weight: bold;
			}
			.right-title p:first-child {
			    width: 230px;
			    border-right: 2px solid #e5e5e5;
			}
			.right-title p:last-child{ flex: 1; }
			.tab{ display: none; }
			.item{ 
				display: flex;
                background-color: #fff;
                border-top: 2px solid #e5e5e5;
                border-left: 2px solid #e5e5e5;
			}
	    	.item .time{
	    		display: flex;
			    align-items: center;
			    justify-content: center;
			    flex-direction: column;
	    		width: 228px;
	    		font-size: 18px;
	    		color: #333333;
	    		text-align: center;
	    		border-right: 2px solid #e5e5e5;
	    	}
	    	.content{ 
	    		flex: 1;
	    		margin-left: 5px;
	    	}
	    	.content li{
	    		padding: 12px 15px;
	    		padding-right: 5px;
	    		list-style-type: none;
	    		color: #498fe1;
	    		border-bottom: 1px solid #e5e5e5;
	    	}
	    	.content li:last-child{ border-bottom: 0; }
	    	.content li .clock {
			    color: #22ac38;
			    margin-right: 30px;
			}
	    	.content li span{
	    		color: #333;
	    		font-size: 12px;
	    	}
	    	.content .finish .clock,
	    	.content .finish span{ color: #999;}
            #wrapper001{
                position: relative;
                overflow: auto;
                height: calc( 100vh - 94px );
            }
		</style>
	</head>
	<body onload="loaded()">
		<div class="container">
		<div class="left">
            <p class="left-title">领导姓名</p>
			<div id="wrapper001">	
				<ul id="ul1">
				</ul>
			</div>
		</div>
		<div class="right">
			<div class="top-button">
				<button id="prevWeek">
					<div class="triangle_border_left"></div>上一周
				</button>
				<button id="nextWeek" class="next">下一周<div class="triangle_border_right"></div></button>
			</div>
			<div class="right-title">
				<p>日期</p>
				<p>日程安排</p>
			</div>
			<div class="tab" style="display:block;">
			</div>
		</div>
    </div>
	</body>
   <script src="~/Content/static/js/iscroll.min.js"></script>

    <script type="text/javascript">
        var myScroll;
        function loaded() {
            myScroll = new IScroll('#wrapper001');
        }
    </script>

<script type="text/javascript">
        // 全局变量
        var prevMonday = '';
        var nextMonday = '';
        var currentUid = '';
        var dateOfCurrentMonday = '';

        /*
		var ul = document.getElementById('ul1')
		var lis = ul.children
		var divs = document.getElementsByClassName("tab");
		if(lis.length<17){
			ul.style.height = document.body.offsetHeight
		}
		for(var i=0; i<lis.length; i++){
			//循环把i的值赋值给li的index
			lis[i].index = i;
			lis[i].onclick = function(){
				//移除每个li上存在的类
				for(var j=0; j<lis.length; j++){
					lis[j].className = "";
				}
				//给当前li添加类
				this.className ="hover";
				//隐藏每个div
				for(var i=0; i<divs.length; i++){
					divs[i].style.display="none";
				}
				//根据索引显示相应的div
				divs[this.index].style.display = "block";
			}
		}
        */
        
        $(document).ready(function () {

		    // 获取角色组人员列表
		    $.ajax({
		        type: 'GET',
		        url: '/Apps/Tiger/GroupCalendar/GetGroupUsers',
		        data: {},
		        success: function (result) {
		            var users = result.Data.Users;
		            // 构造左侧人员列表
		            var listr = '';
		            users.forEach(function (item, index) {
		                if (index == 0) {
		                    listr += '<li class="hover" emplid="' + item.EmplID + '" onClick="getTaskView(' + item.EmplID + ')"><span>' + item.Name + '</span></li>'
		                    getTaskView(item.EmplID);
		                } else {
		                    listr += '<li emplid="' + item.EmplID + '" onClick="getTaskView(' + item.EmplID + ')"><span>' + item.Name + '</span></li>';
		                }
		            });
		            $("#ul1").append(listr);
		        },
		        error: function (error) {
		            console.log(error);
		        }
		    });
		    $("#ul1 > li:nth-child(1)").className = 'hover';

		    // 上一周点击事件
		    $("#prevWeek").click(function () {
		        dateOfCurrentMonday = prevMonday;
		        getData(currentUid);
		    });
		    // 下一周事件
		    $("#nextWeek").click(function () {
		        dateOfCurrentMonday = nextMonday;
		        getData(currentUid);
		    });
		});

		function getTaskView(id) {
		    prevMonday = '';
		    nextMonday = '';
		    dateOfCurrentMonday = '';
		    getData(id);
		}

		function getData(id) {
		    currentUid = id;
		    // 当前日期
		    var currentDate = new Date();
		    var date = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-' + currentDate.getDate()
		    $.ajax({
		        type: 'GET',
		        url: '/Apps/Tiger/GroupCalendar/GetTasksByWeek?uid=' + id + '&date='+date + '&dateOfCurrentMonday='+dateOfCurrentMonday,
		        data: {},
		        success: function (result) {
		            $(".tab").empty().append(getListStr(result.Content));
		            prevMonday = result.DateTimeOfPrevMonday;
		            nextMonday = result.DateTimeOfNextMonday;
		            // 更新选中的元素样式
		            var ul = document.getElementById('ul1')
		            var lis = ul.children
		            if (lis.length < 17) {
		                ul.style.height = document.body.offsetHeight
		            }
		            for (var i = 0; i < lis.length; i++) {
		                //循环把i的值赋值给li的index
		                var li = lis[i];
		                console.log(li.getAttribute("emplid"))
		                if (li.getAttribute("emplid") == id) {
		                    li.className = "hover";
		                } else {
		                    li.className = "";
		                }
		            }
		        },
		        error: function (error) {
		            console.log(error);
		        }
		    });
		}

        // 组装Cell字符串
		function getListStr(content){
            
		    var ls = ''
		    content.forEach(function (item) {

		        ls +=
                    '<div class="item">'
					    + '<div class="time">'
						+ '<p>'+item.Day+'</p>'
						+ '<p>'+item.Date+'</p>'
					    + '</div>'
					    + '<div class="content">'
						+ '<ul>'
                        + getTasks(item.Tasks)
						+ '</ul>'
					    + '</div>'
				   + '</div>'

		    })

            return ls
		}

		function getTasks(tasks) {
		    var ts = ''

		    tasks.forEach(function (task) {
		        if (task.IsFinished == true) {
		            ts += '<li class="finish"><span class="clock">' + task.StartTime + '</span><span>' + task.Content + '</span></li>';
		        }
		        else {
		            ts += '<li><span class="clock">' + task.StartTime + '</span><span>' + task.Content + '</span></li>';
		        }
		    })
		    return ts;
	   }

	</script>  
</html>
